<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网订单</title>
<!-- 次页面已经放入front目录下     根目录 -->
<base href="../"/>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/order.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- 顶部区域 -->
<header id="header">
	<!-- 顶部标题区域 -->
	<div class="htitle">
    	<a href="#" target="_blank" class="location">衡阳</a>
        <div class="header-info" id="login_info">
            <div class="login-info" v-if="isLogin">
            	<a href="user.html" title="个人信息" target="blakn">欢迎您：{{nickName}}</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
            <div class="login-info" v-else>
            	<a href="login.html" title="点击登录">您好，请登录</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
            
            <div class="person-info">
            	<span>|</span>
            	<a href="order.html" target="_blank">我的订单</a>
                <span>|</span>
                <a href="#" target="_blank">我的小吃</a>
                <span>|</span>
                <a href="#" target="_blank">客户服务</a>
                <span>|</span>
           		<a href="#" target="_blank">个人信息</a>
            </div>
        
        </div>
    </div>
    
    <!-- 顶部搜索区域 -->
    <div class="search">
    	<div class="search_left">
    		<a href="index.html" title="首页">
            	<img src="images/logo.png" width="260px" height="120px"/> 
            </a>
        </div>
        
        <div class="search_right">
        	<div class="search_top">
                <div class="search_div">
                    <input type="search" class="search-ipt" placeholder="请输入要搜索的内容" id='search_gname'/>
                    <input type="button" class="search-btn" @click="search"/>  
                </div>
                <div class="buycart">
                	<i class="iconfont">{{cartCount}}</i>
                    <a href="front/cart.html" target="_blank">我的购物车</a>
                </div>
            </div>

            <!-- 类型渲染 -->
            <div class="search_item" id="search_item">
            	<a href="javascript:void(0)" class="selected" @click="findByTno(0, '')">全部</a>
            	<a href="javascript:void(0)" v-for="(type, index) in types" 
            		@click="findByTno(index + 1, type.tno)" :data-tno="type.tno">{{type.tname}}</a>
            		<!-- vue给标签绑定自定义数据 ： data-tno -->
            </div>
        </div>
    </div>
</header>
  
<div id="app">
	<!-- 订单列表 -->
	<div class="common_list_con clearfix" id="order_list">
	    <ul class="goods_list_th clearfix">
	        <li class="col01">商品名称</li>
	        <li class="col03">商品单位</li>
	        <li class="col03">商品价格</li>
	        <li class="col02">数量</li>
	        <li class="col03">小计</li>		
	    </ul>
	</div>
	<div class="order_list_con" id="products_list">
	<!-- 循环订单 -->
		<div v-for="item in orders">
		    <div class="order_title">
		    	<span>订单号：{{item.ono}}</span><span>下单日期： {{item.odate}}</span><span>订单总额：<b style="color:red">{{item.amount}}</b> 元</span>
		    	<a href="javascript:void(0)" v-if="item.status == 1" @click="gotoPay(item.ono, item.amount)" style="color: red">去支付</a>
		    	<a href="javascript:void(0)" v-else="item.status == 2"  style="color: orange">已支付</a>
		    	<a href="javascript:void(0)" v-else="item.status == 3"  style="color: purple">已发货</a>
		    	<a href="javascript:void(0)" v-else="item.status == 4"  style="color: skyblue">去评论</a>
		    	<a href="javascript:void(0)" v-else  style="color: gren">已完成</a>
		    </div>
		    <ul class="goods_list_td clearfix" v-for="(good, index) in item.goods">
		        <li class="col01">{{index + 1}}</li>			
		        <li class="col02"><img :src="good.pics"></li>
		        <li class="col03">{{good.gname}}</li>
		        <li class="col04">{{good.weight}}/{{good.unit}}</li>
		        <li class="col04">{{good.price}}元</li>
		        <li class="col03">{{good.nums}}</li>
		        <li class="col04" v-html="(good.nums * good.price).toFixed(2) + '元'"></li>	
		    </ul>
	    </div>
	</div>
</div>           
<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>
<script src="js/jquery-3.4.1.min.js"></script>

<!-- 依次引入相关JS文件 -->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<!-- 引入检查登录和类型 购物车 公共js文件 -->
<script type="text/javascript" src="js/base.js"></script>

<script type="text/javascript">
let app = new Vue({
	el:"#app",
	data:{
		orders:[],  //订单信息
	},
	mounted(){
		axios.get("order/findByMno").then( result=>{
			if(result.status == 200 && result.data.code == 200){
				this.orders = result.data.data;
				console.log(this.orders);
				return;
			}
			if(result.data.code == 500){
				showMsg("暂无订单信息，马上去选购吧...", "blue", function(){ location.href="front/cart.html"});
			 	return;
			}
			
		})
	},
	methods:{
		gotoPay( ono, amount){  //去支付 订单编号和订单总价
			//TODO 发送支付请求到支付宝沙箱
			
			//location.href = 'alipay?ono=' + ono + "&amount=" + amount;
			
			 $.post("alipay/pay", {ono: ono, amount: amount}, data=>{
				document.write(data);
			})  
		}
	}
	
})

</script>
</body>
</html>
